import React from "react";
import axios from 'axios';
import qs from 'qs';
import { Modal, Form, Input, Select, Cascader, message } from 'antd';
import emitter from '@/events';
import division_options from '@/china-division';

const { Option } = Select;
const { TextArea } = Input;

let _id = '',
    resetTable = null;

const sendFormData = (data) => {
    const location = data['location'];
    const _data = Object.assign({}, data, {
        province: location[0],
        city: location[1],
        region: location[2]
    });
    delete _data['location'];
    axios({
        method: 'post',
        url: data.id ? '/school/updateSchoolInfo' : '/school/add',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: qs.stringify(_data)
    }).then(res => {
        if(res.success){
            message.success('操作成功');
            resetTable && resetTable()
        }else{
            message.error(res.message)
        }
    })
};

const AddModal = (props) => {

    const [form] = Form.useForm();
    const [visible, setVisible] = React.useState(false);
    const [confirmLoading, setConfirmLoading] = React.useState(false);

    resetTable = props.search;
    !emitter.listeners('showModal').length && emitter.on('showModal', (data = {}) => {
        _id = data ? data.id : '';
        form.setFieldsValue({
            "schoolName": data['schoolName'],
            "serviceType": data['serviceType'],
            "location": [data['province'],data['city'],data['region']],
            "detailAddress": data['detailAddress'],
            "remark": data['remark']
        });
        setVisible(true)
    });

    const handleOk = () => {
        form.validateFields().then(fd => {
            _id && (fd.id = _id);
            sendFormData(fd);
            setConfirmLoading(true);
            emitter.removeAllListeners(['showModal']);
            setTimeout(() => {
                setVisible(false);
                setConfirmLoading(false)
            }, 1000)
        })
    };

    const handleCancel = () => {
        setVisible(false);
        emitter.removeAllListeners(['showModal'])
    };

    return (
        <>
            <Modal
                title={_id ? "修改学校信息" : "添加学校"}
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <Form labelCol={{span: 4}} form={form}>
                    <Form.Item label="学校名称" name="schoolName" rules={[{required: true,message: '请输入学校名称'}]}>
                        <Input type="text"/>
                    </Form.Item>
                    <Form.Item label="服务类型" name="serviceType" rules={[{required: true,message: '请选择服务类型'}]}>
                        <Select>
                            <Option value="1">私有化部署</Option>
                            <Option value="2">实训服务</Option>
                            <Option value="3">私有化部署+服务</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="学校地址" name="location" rules={[{type: 'array', required: true,message: '请选择省/市/区'}]}>
                        <Cascader options={division_options} placeholder=""/>
                    </Form.Item>
                    <Form.Item name="detailAddress" rules={[{required: true,message: '请输入详细地址'}]} style={{"width":"83.33%","marginLeft": "16.66%"}}>
                        <Input type="text" placeholder="详细地址"/>
                    </Form.Item>
                    <Form.Item label="备注" name="remark">
                        <TextArea rows={4}/>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
};

export default AddModal;